<template>
  <div class="card-template">
    <div class="unit-logo"><el-image style="width: 20px; height: 20px" :src="userInfo.unit_logo" /></div>
    <div class="user-box">
      <div class="user-content">
        <div class="info">
          <div class="info-name">
            {{ userInfo.real_name }}
          </div>
          <div class="professional">
            {{ userInfo.unit_title }}｜
            {{ userInfo.unit_department }}
          </div>
          <div class="info-hospitals">
            <span class="is-topThree" v-show="userInfo.unit_level"><i class="iconfont icon-yiyuan1"></i>{{
              userInfo.unit_level }}</span>
            {{ userInfo.unit_name }}
          </div>
        </div>
      </div>
      <div class="right-image">
        <el-image style="width: 100px; height: 100px" round fit="cover" :src="userInfo.real_photo || avatarIcon" />
      </div>
    </div>
    <div class="honor-content">
      <div class="honor-box" v-for="(h, k) in honor" :key="k">
        <div class="honor">
          <HonorIcon />{{ h }}
          <RightHonorIcon />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import avatarIcon from '@/assets/images/userInfo/avatar.png'
import HonorIcon from '@/components/icons/IconHonor.vue'
import RightHonorIcon from '@/components/icons/IconHonorRight.vue'

export default {
  components: {
    HonorIcon,
    RightHonorIcon,
  },
  props: {
    // 用户信息
    userInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      avatarIcon: avatarIcon,
      honor: [
        // '广东省医师协会胸外科分会常务委员',
        // '广东省精准医学应用协会食管癌分会',
        // '中国医药教育协会胸外科专委会常务委员'
      ]
    }
  },
  computed: {
  },
  created() {

  },
  watch: {
    userInfo: {
      handler(nv) {
        if (nv.unit_job && nv.unit_job !== '') {
          this.honor = nv.unit_job.split(',')
        } else {
          this.honor = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    jumpPage(url) {
      router.push(url)
    }
  }
}
</script>
<style scoped lang="scss">
.card-template {
  font-size: 16px;

  .unit-logo {
    height: 30px;

    :deep(.el-image) {
      width: 40px;
      height: 40px;
    }
  }

  .user-box {
    // height: 175px;
    display: flex;
    position: relative;

    :deep(.el-image) {
      width: 112px;
      height: 144px;
      border-radius: 8px;
    }

    .right-image {
      position: absolute;
      right: 0;
    }
  }

  .user-content {
    width: calc(100% - 112px);

    .info-name {
      font-weight: 600;
      font-size: 24px;
      color: #1c1f23;
      line-height: 34px;
      margin-bottom: 4px;
    }

    .professional {
      font-weight: 500;
      font-size: 16px;
      color: #1c1f23;
      line-height: 22px;
      margin-bottom: 4px;
    }

    .info-hospitals {
      font-size: 14px;
      color: #1c1f23;
      margin-bottom: 12px;
      line-height: 20px;
    }

    .is-topThree {
      width: 56px;
      height: 20px;
      background: rgba(4, 209, 184, 0.1);
      border-radius: 4px;
      font-size: 14px;
      color: #08bda7;
      line-height: 20px;
      padding: 0 4px;
      position: relative;

      .iconfont {
        font-size: 12px;
        margin-right: 2px;
      }

      &::before {
        position: absolute;
        width: 20px;
        height: 20px;
        content: '';
        background-image: url('/@/assets/images/userInfo/hos_icon.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 4px;
      }
    }
  }

  .honor-content {
    .honor-box {
      width: 100%;
      /* 或者你需要的固定宽度 */
      overflow: hidden;
      height: 17px;
      margin-bottom: 4px;
    }

    .honor {
      margin-right: -50px;
      /* 根据需要调整这个值 */
      width: max-content;
      height: 17px;
      line-height: 17px;
      background: linear-gradient(90deg, #f7f2e4 0%, #ffefcb 100%);
      border-radius: 4px 4px 4px 4px;
      padding: 0 6px;
      font-size: 12px;
      color: #ae6b1a;
      text-align: center;
    }
  }
}
</style>
